<template>
  <XnDialog custom-class="add-edit-dialog" title="评价预览" :visible.sync="selfVisible" @close="onClose" width="640px">
    <div class="dialog_con">
      <div class="tips">
        <i class="el-icon el-icon-bell"></i>
        <p class="tip-txt">
          指标评价模型设置完成后， 领导对被考核对象进行评价打分时，评价打分按照设置的最新指标进行打分，页面示意如下。
        </p>
      </div>
      <div class="score-box">
        <div class="model-title">
          <el-divider content-position="center">{{ modelTitle || '模型名称' }}</el-divider>
        </div>
        <el-collapse v-model="activeNames">
          <PreviewScore :score="scoreInfo"></PreviewScore>
        </el-collapse>
      </div>
    </div>
    <div class="dialog_footer">
      <el-button size="small" type="primary" @click.stop="onClose">我知道了</el-button>
    </div>
  </XnDialog>
</template>
<script>
import PreviewScore from './PreviewScore.vue'
import XnDialog from '@com/xnDialog.vue'
import { getPreviewData } from '@api/modules/indexModel.js'
export default {
  name: 'PreviewDialog',
  props: {
    viewId: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
    },
  },
  components: {
    PreviewScore,
    XnDialog,
  },
  data() {
    return {
      selfVisible: false,
      modelTitle: '',
      scoreInfo: {},
      activeNames: [],
    }
  },
  watch: {
    visible(visible) {
      this.selfVisible = visible
      if (visible) {
        this.getPreviewDetail()
      }
    },
  },
  methods: {
    onClose() {
      this.modelTitle = ''
      this.scoreInfo = {}
      this.activeNames = []
      this.selfVisible = false
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    // 获取预览详情
    getPreviewDetail() {
      if (this.viewId) {
        getPreviewData(this.viewId).then(res => {
          if (res.status === 200 || res.code === 0) {
            const { assessName = '' } = res.data || {}
            this.modelTitle = assessName
            this.getActiceNames(res.data || {})
            this.scoreInfo = res.data || {}
          }
        })
      }
    },
    // 获取所有模型
    getActiceNames(obj) {
      if ((obj.children && obj.children.length) || obj.busType === '05') {
        this.activeNames.push(obj.busId)
        obj.children.forEach(item => {
          this.getActiceNames(item)
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.add-edit-dialog ::v-deep {
  .el-dialog .dialog_con {
    position: relative;
    .tips {
      display: flex;
      color: #333;
      margin-bottom: 20px;
      .el-icon {
        font-size: 20px;
      }
      .tip-txt {
        margin-left: 10px;
        font-size: 14px;
        line-height: 20px;
      }
    }
    .score-box {
      min-height: 120px;
      max-height: 300px;
      width: 100%;
      overflow-x: auto;
      overflow-y: auto;
      .model-title {
        margin-bottom: 20px;
        padding-top: 20px;
        font-weight: 600;
        .el-divider__text {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
